<style>
    html,
    body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }

    body {
        background-image: url(/static/img/login_bg.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .contents {
        width: 400px;
        height: 300px;
        margin: 0 auto;
        padding: 20px;
        padding-top: 300px;
    }

    .input-width {
        width: 281px !important;
    }
</style>
<div class="contents">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;color:#fff">
        <legend>登录</legend>
    </fieldset>
    <form class="layui-form layui-form-pane" action="">
        <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">用户账号</label>
            <div class="layui-input-inline input-width">
                <input type="username" name="uaername" required lay-verify="username" placeholder="请输入用户"
                    autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户密码</label>
            <div class="layui-input-inline input-width">
                <input type="password" name="password" required lay-verify="password" placeholder="请输入密码"
                    autocomplete="off" class="layui-input">
            </div>
            <i class="layui-icon layui-icon-password" style="font-size: 30px; color: #1E9FFF;"></i>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-radius" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary layui-btn-radius">重置</button>
            </div>
        </div>
    </form>
</div>
<script>
    //JavaScript代码区域
    layui.use(['form', 'jquery'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        //监听提交
        form.on('submit(formDemo)', function (data) {
            $.post("/admin/login", data.field, function (d) {
                if (d.code == 0) {
                    window.location.href = "/admin"
                } else {
                    layer.msg(d.message)
                }
            })
            return false;
        });
        //自定义验证规则
        form.verify({
            username: [
                /^[a-zA-Z][a-zA-Z0-9]{4,12}$/
                , '用户名必须5到12位，且首位不能是数字，中间不能出现空格'
            ],
            password: [
                /^[\S\ ]{5,40}$/
                , '密码必须5到40位'
            ]
        });
    });
</script>